<script setup lang="ts">
// import { h, resolveComponent } from 'vue';

// const props = withDefaults(defineProps<{
//   name?: string; // 图标名称 `ele-` 开头为elementplus图标
//   color?: string, // 图标颜色
//   size?: number | string, // 图标大小
// }>(), {
//   name: '',
//   size: 18,
// });

// const render = () => {
//   if (props.name?.startsWith('ele-')) {
//     //<el-icon color='xxx' size='xxx'><ele-xxx></el-icon>
//     return h(
//       resolveComponent('el-icon'),
//       { color: props.color, size: props.size },
//       () => h(resolveComponent(props.name))
//     );
//   } else {
//     return h('i'); // <i></i>
//   }
// };

const props = withDefaults(defineProps<{
  name?: string; // 图标名称 `ele-` 开头为elementplus图标
  color?: string, // 图标颜色
  size?: number | string, // 图标大小
}>(), {
  name: '',
  size: 18,
});

const iconClass = computed(() => `el-icon-${props.name}`)
</script>

<template>
  <!-- 使用元素方式引用渲染对象 -->
  <!-- <render /> -->

  <i :class="iconClass"></i>

</template>

<style scoped></style>